{% extends "base.html" %}
{% block title %}{{ student.real_name }} - 学员详情 - 乒乓球培训管理系统{% endblock %}
{% block page_title %}学员详情{% endblock %}

{% block extra_css %}
<style>
.profile-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 15px;
    padding: 2rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.profile-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 200%;
    background: rgba(255,255,255,0.1);
    transform: rotate(45deg);
}

.profile-avatar {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,0.2);
    position: relative;
    z-index: 1;
}

.info-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: transform 0.2s ease;
}

.info-card:hover {
    transform: translateY(-2px);
}

.stat-item {
    text-align: center;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: #495057;
}

.stat-label {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.coach-card {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    transition: all 0.2s ease;
}

.coach-card:hover {
    border-color: #007bff;
    box-shadow: 0 2px 8px rgba(0,123,255,0.15);
}

.coach-avatar {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
}

.reservation-item {
    border-left: 4px solid #007bff;
    padding: 1rem;
    margin-bottom: 1rem;
    background: #f8f9fa;
    border-radius: 0 8px 8px 0;
}

.status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.5rem;
}

.status-active { background-color: #28a745; }
.status-inactive { background-color: #6c757d; }
.status-pending { background-color: #ffc107; }
.status-completed { background-color: #17a2b8; }
.status-cancelled { background-color: #dc3545; }

.action-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .profile-header {
        text-align: center;
        padding: 1.5rem;
    }

    .action-buttons {
        justify-content: center;
    }

    .info-card {
        margin-bottom: 1rem;
    }
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 返回按钮 -->
    <div class="mb-3">
        <a href="{{ url_for('students.list') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> 返回学员列表
        </a>
    </div>

    <!-- 学员档案头部 -->
    <div class="profile-header">
        <div class="row align-items-center">
            <div class="col-md-3 text-center">
                {% if student.photo_url %}
                <img src="{{ student.photo_url }}" alt="{{ student.real_name }}" class="profile-avatar">
                {% else %}
                <div class="profile-avatar mx-auto bg-white bg-opacity-25 d-flex align-items-center justify-content-center">
                    <i class="bi bi-person-fill fs-1"></i>
                </div>
                {% endif %}
            </div>
            <div class="col-md-6">
                <h2 class="mb-1">{{ student.real_name }}</h2>
                <p class="mb-1 opacity-75">
                    <i class="bi bi-telephone me-2"></i>{{ student.phone }}
                </p>
                {% if student.email %}
                <p class="mb-1 opacity-75">
                    <i class="bi bi-envelope me-2"></i>{{ student.email }}
                </p>
                {% endif %}
                <p class="mb-1 opacity-75">
                    <i class="bi bi-building me-2"></i>
                    {{ student.campus.name if student.campus else '未分配校区' }}
                </p>
                <p class="mb-0 opacity-75">
                    <i class="bi bi-calendar me-2"></i>
                    注册时间：{{ student.created_at.strftime('%Y年%m月%d日') if student.created_at else '未知' }}
                </p>
            </div>
            <div class="col-md-3 text-center">
                <div class="d-flex align-items-center justify-content-center mb-2">
                    <span class="status-indicator status-{{ student.status }}"></span>
                    <span class="badge fs-6
                          {% if student.status == 'active' %}bg-success{% else %}bg-secondary{% endif %}">
                        {% if student.status == 'active' %}活跃学员{% else %}不活跃{% endif %}
                    </span>
                </div>
                {% if student.created_at %}
                <small class="opacity-75">
                    注册时间：{{ student.created_at.strftime('%Y-%m-%d %H:%M') }}
                </small>
                {% else %}
                <small class="opacity-75 text-warning">注册时间未知</small>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="row">
        <!-- 左侧：基本信息和统计 -->
        <div class="col-md-4">
            <!-- 基本信息 -->
            <div class="info-card">
                <h5 class="card-title mb-3">
                    <i class="bi bi-person-lines-fill me-2"></i>基本信息
                </h5>
                <div class="row">
                    <div class="col-6">
                        <div class="mb-3">
                            <label class="form-label text-muted">性别</label>
                            <div>
                                {% if student.gender == 'male' %}
                                    <i class="bi bi-gender-male text-primary"></i> 男性
                                {% elif student.gender == 'female' %}
                                    <i class="bi bi-gender-female text-danger"></i> 女性
                                {% else %}
                                    <i class="bi bi-question-circle text-muted"></i> 未设置
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="mb-3">
                            <label class="form-label text-muted">年龄</label>
                            <div>{{ student.age if student.age else '未设置' }}</div>
                        </div>
                    </div>
                </div>
                {% if student.bio %}
                <div class="mb-0">
                    <label class="form-label text-muted">个人简介</label>
                    <div class="bg-light p-2 rounded">{{ student.bio }}</div>
                </div>
                {% endif %}
            </div>

            <!-- 统计数据 -->
            <div class="info-card">
                <h5 class="card-title mb-3">
                    <i class="bi bi-graph-up me-2"></i>学习统计
                </h5>
                <div class="row">
                    <div class="col-6">
                        <div class="stat-item">
                            <div class="stat-value text-primary">{{ statistics.total_coaches }}</div>
                            <div class="stat-label">教练数量</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="stat-item">
                            <div class="stat-value text-success">{{ statistics.total_reservations }}</div>
                            <div class="stat-label">预约次数</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="stat-item">
                            <div class="stat-value text-info">{{ statistics.total_hours }}</div>
                            <div class="stat-label">学习时长(小时)</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="stat-item">
                            <div class="stat-value text-warning">¥{{ statistics.total_spending }}</div>
                            <div class="stat-label">总消费</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 操作按钮 -->
            <div class="info-card">
                <h5 class="card-title mb-3">
                    <i class="bi bi-gear me-2"></i>操作
                </h5>
                <div class="action-buttons">
                    <a href="{{ url_for('students.edit', id=student.id) }}" class="btn btn-primary">
                        <i class="bi bi-pencil"></i> 编辑信息
                    </a>
                    <a href="{{ url_for('students.profile', id=student.id) }}" class="btn btn-info">
                        <i class="bi bi-person-badge"></i> 查看档案
                    </a>
                    {% if current_user.is_super_admin() %}
                    <a href="{{ url_for('students.delete', id=student.id) }}"
                       class="btn btn-danger"
                       onclick="return confirm('确定要删除学员「{{ student.real_name }}」吗？')">
                        <i class="bi bi-trash"></i> 删除学员
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- 右侧：教练和预约信息 -->
        <div class="col-md-8">
            <!-- 我的教练 -->
            <div class="info-card">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="card-title mb-0">
                        <i class="bi bi-people me-2"></i>我的教练 ({{ coaches|length }})
                    </h5>
                    {% if student.id == current_user.id %}
                    <a href="{{ url_for('students.apply_coach', id=student.id) }}" class="btn btn-sm btn-outline-primary">
                        <i class="bi bi-plus"></i> 申请教练
                    </a>
                    {% endif %}
                </div>

                {% if coaches %}
                <div class="row">
                    {% for coach in coaches %}
                    <div class="col-md-6">
                        <div class="coach-card">
                            <div class="d-flex align-items-center">
                                {% if coach.photo_url %}
                                <img src="{{ coach.photo_url }}" alt="{{ coach.real_name }}" class="coach-avatar me-3">
                                {% else %}
                                <div class="coach-avatar me-3 bg-light d-flex align-items-center justify-content-center">
                                    <i class="bi bi-person-fill text-muted"></i>
                                </div>
                                {% endif %}
                                <div class="flex-grow-1">
                                    <h6 class="mb-1">{{ coach.real_name }}</h6>
                                    <small class="text-muted">
                                        {{ coach.coach_level }}级教练 • ¥{{ coach.hourly_rate }}/小时
                                    </small>
                                    <div class="mt-1">
                                        <span class="badge bg-success">活跃</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="text-center py-4 text-muted">
                    <i class="bi bi-person-x display-6"></i>
                    <p class="mt-2">暂无关联教练</p>
                    {% if student.id == current_user.id %}
                    <a href="{{ url_for('students.apply_coach', id=student.id) }}" class="btn btn-primary">
                        <i class="bi bi-plus"></i> 申请教练
                    </a>
                    {% endif %}
                </div>
                {% endif %}
            </div>

            <!-- 最近预约 -->
            <div class="info-card">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="card-title mb-0">
                        <i class="bi bi-calendar-event me-2"></i>最近预约
                    </h5>
                    <a href="{{ url_for('student_reservations.index') }}" class="btn btn-sm btn-outline-info">
                        <i class="bi bi-eye"></i> 查看全部
                    </a>
                </div>

                {% if recent_reservations %}
                {% for reservation in recent_reservations %}
                <div class="reservation-item">
                    <div class="d-flex justify-content-between align-items-start">
                        <div class="flex-grow-1">
                            <h6 class="mb-1">
                                球台 {{ reservation.table.name if reservation.table else '未知' }}
                                {% if reservation.coach %}
                                • 教练：{{ reservation.coach.real_name }}
                                {% endif %}
                            </h6>
                            <p class="mb-1 text-muted">
                                <i class="bi bi-calendar me-1"></i>
                                {{ reservation.start_time.strftime('%Y-%m-%d %H:%M') }} -
                                {{ reservation.end_time.strftime('%H:%M') }}
                            </p>
                            <p class="mb-0 text-muted">
                                <i class="bi bi-cash me-1"></i>费用：¥{{ reservation.price }}
                            </p>
                        </div>
                        <div class="text-end">
                            <span class="badge
                                  {% if reservation.status == 'completed' %}bg-success
                                  {% elif reservation.status == 'pending' %}bg-warning
                                  {% elif reservation.status == 'cancelled' %}bg-danger
                                  {% else %}bg-info{% endif %}">
                                {% if reservation.status == 'completed' %}已完成
                                {% elif reservation.status == 'pending' %}待确认
                                {% elif reservation.status == 'cancelled' %}已取消
                                {% else %}{{ reservation.status }}{% endif %}
                            </span>
                        </div>
                    </div>
                </div>
                {% endfor %}
                {% else %}
                <div class="text-center py-4 text-muted">
                    <i class="bi bi-calendar-x display-6"></i>
                    <p class="mt-2">暂无预约记录</p>
                </div>
                {% endif %}
            </div>

            <!-- 账户信息 -->
            <div class="info-card">
                <h5 class="card-title mb-3">
                    <i class="bi bi-wallet2 me-2"></i>账户信息
                </h5>
                <div class="row">
                    <div class="col-md-4">
                        <div class="stat-item">
                            <div class="stat-value text-success">¥{{ statistics.account_balance or '0.00' }}</div>
                            <div class="stat-label">账户余额</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="stat-item">
                            <div class="stat-value text-primary">{{ statistics.completed_reservations }}</div>
                            <div class="stat-label">已完成课程</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="stat-item">
                            <div class="stat-value text-info">{{ statistics.pending_reservations }}</div>
                            <div class="stat-label">待上课程</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 页面加载时获取最新统计数据
document.addEventListener('DOMContentLoaded', function() {
    refreshStatistics();
});

// 刷新统计数据
function refreshStatistics() {
    fetch('{{ url_for("students.api_statistics", id=student.id) }}')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // 更新统计数据显示
                const stats = data.data;
                updateStatValue('total_coaches', stats.total_coaches);
                updateStatValue('total_reservations', stats.total_reservations);
                updateStatValue('total_hours', stats.total_hours);
                updateStatValue('total_spending', '¥' + stats.total_spending);
                updateStatValue('account_balance', '¥' + (stats.account_balance || '0.00'));
                updateStatValue('completed_reservations', stats.completed_reservations);
                updateStatValue('pending_reservations', stats.pending_reservations);
            }
        })
        .catch(error => console.error('获取统计数据失败:', error));
}

// 更新统计值显示
function updateStatValue(className, value) {
    const elements = document.querySelectorAll('.stat-value');
    elements.forEach(el => {
        if (el.textContent.includes(className) || el.closest('.stat-item').querySelector('.stat-label').textContent.includes(getStatLabel(className))) {
            el.textContent = value;
        }
    });
}

// 获取统计项标签
function getStatLabel(className) {
    const labels = {
        'total_coaches': '教练数量',
        'total_reservations': '预约次数',
        'total_hours': '学习时长',
        'total_spending': '总消费',
        'account_balance': '账户余额',
        'completed_reservations': '已完成课程',
        'pending_reservations': '待上课程'
    };
    return labels[className] || '';
}

// 定时刷新数据
setInterval(refreshStatistics, 60000); // 每分钟刷新一次
</script>
{% endblock %}